<template>
  <div class="swipeCell_container">
    <div
      class="swiperCell_content"
      :style="{ left: `-${leftVal}px`, transition: `${ition}s` }"
      @touchstart.prevent="touchStart"
      @touchend.prevent="touchEnd"
    >
      <div class="swiperCell_content_main">
        <slot name="main"></slot>
      </div>
      <div class="swiperCell_content_aside">
        <slot name="aside"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'swipeCell_container',
  data() {
    return {
      leftVal: 0,
      ition: 0.8,
      startX: 0,
      endX: 0,
      flag: false,
      swiperCell_aside_width: 0,
    }
  },
  mounted() {
    this.flag = true
    this.$nextTick(() => {
      this.swiperCell_aside_width = this.$el.querySelector(
        '.swiperCell_content_aside'
      ).clientWidth
    })
  },
  methods: {
    touchStart(e) {
      this.startX = e.touches[0].clientX
    },
    touchEnd(e) {
      this.endX = e.changedTouches[0].clientX
      // 左滑
      if (this.startX - this.endX > 30) {
        this.throttle('next')
      }
      // 右滑
      if (this.startX - this.endX < -30) {
        this.throttle('prev')
      }
      this.startX = 0
      this.endX = 0
    },
    throttle(type) {
      if (this.flag) {
        this.flag = false
        if (type == 'prev') {
          this.prevFun()
        } else {
          this.nextFun()
        }
        setTimeout(() => {
          this.flag = true
        }, 100) // 节流间隔时间
      }
    },
    prevFun() {
      if (this.leftVal == 0) {
        return
      }
      this.leftVal -= this.swiperCell_aside_width
    },
    nextFun() {
      this.leftVal += this.swiperCell_aside_width
    },
  },
}
</script>
<style lang="less" scoped>
.swipeCell_container {
  overflow: hidden;
  .swiperCell_content {
    position: relative;
    &_aside {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      transform: translateX(100%);
      background-color: aqua;
    }
  }
}
</style>